import React from 'react'
import _ from 'underscore'
import View from 'lib/View.jsx'
import RootScope from './RootScope.es6'
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx'
import GridWidget from 'lib/components/GridWidget.jsx'
import format from 'lib/util/format'
import addWidgetMixin from '../common/NewDashboardWidget.jsx'
import tips from '../common/indicator-tips.jsx'

var traceCols = [{
  title:'名称',
  key:'url',
  containerStyle: {
    maxWidth: 160,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap'
  },
  render:function(fmtVal,rowData){
    return (
      <a className="link-in-list" href={'#/traces/'+rowData.id} data-tip={fmtVal}>{fmtVal}</a>
    )
  }
},{
  title:'白屏时间(ms)',
  key:'breakDown',
  width: 85,
  formatter:format.integer
},{
  title:'耗时(ms)',
  width:'20%',
  key:'executeTime',
  sortable:true,
  formatter:format.integer
},{
  title:'发生时间',
  width:'20%',
  key:'timestamp',
  sortable:true,
  formatter:format.stampToTime
},{
  title:'操作系统及版本',
  width:'20%',
  className:'text-align-right',
  key:'osName',
  render:function(fmtVal,rowData){
    return (
      <span>{fmtVal+' '+rowData.osVersionName}</span>
    )
  }
}]
export default class RootView extends View {
  constructor(props){
    super(props);
  }
  render(){
    return (
      <div>
        <div className="box">
          <Card title="平均执行时间" extra={
              addWidgetMixin(this.scope.chart0Api,'平均执行时间',{
                chartType: 'area'
              })
            }>
            <ChartWidget
              store={this.state.chart0}
              chartType="area"
            />
          </Card>
        </div>
        <div className="box">
          <Card title="执行次数" extra={
              addWidgetMixin(this.scope.chart0Api,'执行次数')
            }>
            <ChartWidget store={this.state.chart1}/>
          </Card>
        </div>
        <div className="box">
          <Card title={
            <span>
              慢加载追踪列表
              <i className="iconfont" data-tip={tips.webview_slow_trace}>&#xe663;</i>
            </span>
          }>
            <GridWidget
              cols={traceCols}
              store={this.state.grid}
            />
          </Card>
        </div>
      </div>
    )
  }
}

RootView.defaultProps = {
  Scope:RootScope
}
